<template>
    <div class="seeOne">
        <div>
            <van-icon name="revoke" @click="back" />
        </div>
        <van-row>
            <van-col span="8">
                <van-col span="24">
                    <van-image class="photo" round width="7rem" fit="cover" :src="'data:image/png;base64,' + user.photo" />
                </van-col>
            </van-col>
            <van-col span="10">
                <br><br>
                <van-col class="user_mes" span="24">{{ user.username }}</van-col>
                <van-col class="user_mes da_number" span="24">搭子号: {{ user.dazi_number }}</van-col>
            </van-col>
            <van-col span="6">
                <br><br>
                <br><br>
                <van-col class="user_mes" span="6" v-show="show2">
                    <van-icon name="closed-eye" @click="close(user.dazi_number)" />

                </van-col>
                <van-col class="user_mes" span="6" v-show="show">
                    <van-icon name="friends-o" @click="friend(user.dazi_number)" />
                </van-col>
                <van-col class="user_mes da_number" span="12">
                    <van-icon name="chat-o" size="20" @click="chat(user.dazi_number)"
                        v-show="user.phone_number != userTel" />
                </van-col>
            </van-col>
        </van-row>
        <van-divider />
        <van-row>
            <van-col span="12" v-for="(item, i) in list" :key="i">
                <van-image width="12rem" fit="cover" :src="'data:image/png;base64,' + item.photo"
                    @click="contentPage(item.id)" />
                <van-field v-model="item.content" rows="1" autosize type="textarea" />

                <van-row>
                    <van-col span="8"><van-icon name="like-o" :badge="item.good == 0 ? '' : item.good"
                            @click="good(item)" /></van-col>
                </van-row>
            </van-col>
        </van-row>

    </div>
</template>

<script>
export default {
    name: 'SeaOne',
    data() {
        return {
            list: [],
            show: true,
            user: '',
            show2: false,
            userTel: '',
        }
    },
    created: function () {
        const userId = this.$route.query.userId
        const tel = window.localStorage.getItem("dazi_")
        this.userTel = tel
        this.$axios.get('http://localhost:9090/dazi/user/findUserAllByUserId?userId=' + userId)
            .then(res => {
                if (res.data) {
                    this.user = res.data
                    this.$axios.get('http://localhost:9090/dazi/content/findByDazi/' + this.user.dazi_number)
                        .then(res => {
                            this.list = res.data;
                        })
                    const tel = window.localStorage.getItem("dazi_")
                    this.$axios.get('http://localhost:9090/dazi/friend/findByTelAndDazi?tel=' + tel + "&daziNum=" + this.user.dazi_number)
                        .then(res => {
                            if (res.data && res.data.length > 0) {
                                this.show = false
                                this.show2 = true
                            }
                        })
                }
            })
    },
    methods: {
        chat(daziNumber) {
            this.$router.push({ path: '/chat', query: { daziNumber: daziNumber } })
        },
        close(daziNumber) {
            const tel = window.localStorage.getItem("dazi_")
            this.$axios.get('http://localhost:9090/dazi/friend/close?tel=' + tel + "&daziNum=" + daziNumber)
                .then(res => {
                    if (res.data == 1) {
                        this.show = true
                        this.show2 = false
                    }
                })
        },
        friend(daziNumber) {
            const tel = window.localStorage.getItem("dazi_")
            this.$axios.get('http://localhost:9090/dazi/friend/make?tel=' + tel + "&daziNum=" + daziNumber)
                .then(res => {
                    console.log(res)
                    if (res.data == 1) {
                        this.show = false
                        this.show2 = true
                    }
                })
        },
        good(item) {
            item.good += 1
            this.$axios.get('http://localhost:9090/dazi/content/good?id=' + item.id + "&good=" + item.good)
                .then(res => { })
        },
        contentPage(id) {
            this.$router.push({ path: '/contentPage', query: { contentId: id } })
        },
        back() {
            history.back();
        },
    }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-icon {
    margin: 10px 10px;
}

.photo {
    margin: 10px;
}

.user_mes {
    margin: 10px;
}

.da_number {
    font-size: 10px;
}

.van-col {
    padding-left: 1.5px;
    margin: 6px 0;
}
</style>
